<template>
  <boss-view>
    <div slot="content" class="operateData">
      <div class="top">
        <!-- 在线房源 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="title">
              <i class="bossVersion">&#xe608;</i>
              <span>在线房源</span>
            </div>
            <div class="detail">
              <!-- 可租 -->
              <div v-for="(item,index) in onlineHousing.list" :key="index" class="single">
                <p>{{item.name}}</p>
                <div class="num">
                  <span>{{item.value}}</span>
                  <i class="units">套</i>
                </div>
              </div>
              <!-- 在售 -->
              <!-- <div class="single">
                <p>在售</p>
                <div class="num">
                  <span>8,975</span>
                  <i class="units">套</i>
                </div>
              </div>-->
              <!-- 房源增长率 -->
              <div class="single growth">
                <p>房源增长率</p>
                <div class="rate">
                  {{parseInt(onlineHousing.growthRate)}}
                  <span
                    v-if="(Math.floor(onlineHousing.growthRate*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(onlineHousing.growthRate*100)/100).toString().substring((Math.floor(onlineHousing.growthRate*100)/100).toString().lastIndexOf("."),(Math.floor(onlineHousing.growthRate*100)/100).toString().length)}}%</span>
                </div>
              </div>
            </div>
          </div>
        </view-item>
        <!-- 当月成交量 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="title">
              <i class="bossVersion">&#xe606;</i>
              <span>当月成交量</span>
            </div>
            <div class="detail">
              <!-- 新房 -->
              <div v-for="(item,index) in turnoverData" :key="index" class="single">
                <p>{{item.name}}</p>
                <div class="num">
                  <span>{{item.value}}</span>
                  <i class="units">套</i>
                </div>
              </div>
              <!-- 二手房 -->
              <!-- <div class="single">
                <p>二手房</p>
                <div class="num">
                  <span>42</span>
                  <i class="units">套</i>
                </div>
              </div>-->
              <!-- 出租 -->
              <!-- <div class="single">
                <p>出租</p>
                <div class="num">
                  <span>7</span>
                  <i class="units">套</i>
                </div>
              </div>-->
              <!-- 代办 -->
              <!-- <div class="single">
                <p>代办</p>
                <div class="num">
                  <span>5</span>
                  <i class="units">套</i>
                </div>
              </div>-->
            </div>
          </div>
        </view-item>
        <!-- 当月成交额 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="title">
              <i class="bossVersion">&#xe60a;</i>
              <span>当月成交额</span>
            </div>
            <div class="detail quota">
              <!-- 当月成交额 -->
              <div class="single">
                <div class="num">
                  <span class="inlineFlexYbase">
                    {{parseInt(turnover.currentMonthTurnover)}}
                    <i
                      v-if="(Math.floor(turnover.currentMonthTurnover*100)/100).toString().lastIndexOf('.') >= 0"
                    >{{(Math.floor(turnover.currentMonthTurnover*100)/100).toString().substring((Math.floor(turnover.currentMonthTurnover*100)/100).toString().lastIndexOf("."),(Math.floor(turnover.currentMonthTurnover*100)/100).toString().length)}}</i>
                  </span>
                  <i class="units">万元</i>
                </div>
              </div>
              <div class="compare">
                <p>同比上月</p>
                <div class="rate">
                  {{parseInt(turnover.currentMonthTurnoverRatio)}}
                  <span
                    v-if="(Math.floor(turnover.currentMonthTurnoverRatio*100)/100).toString().lastIndexOf('.') >= 0"
                  >{{(Math.floor(turnover.currentMonthTurnoverRatio*100)/100).toString().substring((Math.floor(turnover.currentMonthTurnoverRatio*100)/100).toString().lastIndexOf("."),(Math.floor(turnover.currentMonthTurnoverRatio*100)/100).toString().length)}}%</span>
                </div>
                <i :class="turnover.currentMonthTurnoverRatio > 0 ? 'rise' : 'decline'"></i>
                <!-- <i class="rise"></i> -->
              </div>
            </div>
          </div>
        </view-item>
        <!-- 线上平台 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="title">
              <i class="bossVersion">&#xe60b;</i>
              <span>线上平台</span>
            </div>
            <div class="detail">
              <!-- 累计月访问 -->
              <div class="total">
                <div class="single">
                  <div class="num">
                    <p>累计月访问</p>
                    <i-count-up
                      :startVal="startVal"
                      :endVal="totalData.monthWebsiteVisitsVolume"
                      :decimals="decimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">人次</i>
                  </div>
                </div>
              </div>
              <!-- 单日 增长率 -->
              <div class="day">
                <div class="num">
                  <p>单日</p>
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.dayWebsiteVisitsVolume"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">人次</i>
                </div>
                <div class="single growth">
                  <p>增长率</p>
                  <div class="rate">
                    {{totalData.dayWebsiteVisitsRate}}
                    <!-- <span>.32%</span> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </view-item>
      </div>
      <!-- 获客渠道分布 / 团队构成 / 业务员人均劳效 -->
      <div class="cen">
        <!-- 获客渠道分布 -->
        <view-chart-item class="distribution">
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">获客渠道分布</span>
            </main-title>
            <div class="chartTips">单位:套</div>
            <bar-chart-pile-up
              v-model="channelData"
              :option="channelOption"
              :chartStyle="'min-height:258px;'"
            ></bar-chart-pile-up>
          </div>
        </view-chart-item>
        <!-- 团队构成 -->
        <view-chart-item class="team">
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">团队构成</span>
            </main-title>
            <div class="chartTips">单位:人</div>
            <pie-chart
              v-model="teamComposition"
              :option="seniorityOption"
              :chartStyle="'min-height:258px;'"
            ></pie-chart>
          </div>
        </view-chart-item>
        <!-- 业务员人均劳效 -->
        <view-chart-item class="salesman">
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">业务员人均劳效</span>
            </main-title>
            <div class="chartTips">单位:万元/人</div>
            <line-chart
              v-model="fatigueEffectArr"
              :chartStyle="'min-height:258px;'"
              :option="lineChartOption"
            ></line-chart>
          </div>
        </view-chart-item>
      </div>
      <!-- 门店分布 / 门店经营 / 收入构成 -->
      <div class="bot">
        <view-inside-item>
          <div slot="insideData" class="insideData">
            <!-- 门店分布 -->
            <div class="insideChart">
              <main-title>
                <span slot="txt" class="txt">门店分布</span>
              </main-title>
              <div class="chartTips">单位:家</div>
              <pie-chart
                v-model="distributionOfStores"
                :option="seniorityOption"
                :chartStyle="'min-height:258px;'"
              ></pie-chart>
            </div>
            <em></em>
            <!-- 门店经营 -->
            <div class="insideChart">
              <main-title>
                <span slot="txt" class="txt">门店经营</span>
              </main-title>
              <div class="chartTips">单位:家</div>
              <bar-chart
                v-model="storeManagementArr"
                :option="storeManagementOption"
                :chartStyle="'min-height:258px;'"
              ></bar-chart>
            </div>
            <em></em>
            <!-- 收入构成 -->
            <div class="insideChart">
              <main-title>
                <span slot="txt" class="txt">收入构成</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <pie-chart
                v-model="compositionOfIncome"
                :option="seniorityOption"
                :chartStyle="'min-height:258px;'"
              ></pie-chart>
            </div>
          </div>
        </view-inside-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import viewItem from "@/components/bossVersion/viewItem";
import barChartPileUp from "@/components/Charts/barChartPileUp";
import viewChartItem from "@/components/bossVersion/viewChartItem";
import viewInsideItem from "@/components/bossVersion/viewInsideItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import ICountUp from "vue-countup-v2";
import lineChart from "@/components/Charts/lineChartSmooth";
import barChart from "@/components/Charts/barChart";
import bossView from "@/components/bossVersion/bossView";
import {
  GetOfficialWebsiteVisits,
  GetDataByTargetForTwo,
  GetDoubleDetailList,
  GetDetailList,
  GetFangLianHangForZHData
} from "@/api/bossVersion/FangLianHangForZH";
export default {
  components: {
    barChartPileUp,
    barChart,
    lineChart,
    viewItem,
    viewChartItem,
    viewInsideItem,
    mainTitle,
    ICountUp,
    bossView
  },
  data() {
    return {
      turnover: {
        currentMonthTurnover: 0,
        currentMonthTurnoverRatio: 0
      }, // 成交额
      turnoverData: [],
      onlineHousing: {
        list: [
          { name: "出售", value: 0, percent: null },
          { name: "出租", value: 0, percent: null }
        ],
        growthRate: 0
      },
      // 数字
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      totalData: {
        dayWebsiteVisitsRate: 0,
        dayWebsiteVisitsVolume: 0,
        monthWebsiteVisitsVolume: 0
      },
      channelData: [], // 获客渠道分布
      channelOption: {
        exchange: true,
        grid: {
          width: "100%",
          height: 170,
          top: 50,
          left: "8%"
        },
        legend: {
          top: 10,
          right: 0,
          icon: "rect",
          textStyle: {
            color: "#48e5ff"
          }
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"]
      },
      storeManagementArr: [], // 门店经营
      storeManagementOption: {
        // 应收账款 chart option
        barWidth: 50,
        startColor: "#28E787",
        endColor: "#009245",
        color: "#28E787",
        grid: {
          left: "6%",
          top: 60,
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        // showUnit: true,
        unit: "%"
      },
      fatigueEffectArr: [], // 人均劳效
      lineChartOption: {
        grid: {
          width: "95%",
          height: 160,
          top: 60,
          left: "6.5%"
        },
        showSymbol: "none",
        label: {
          show: false
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#48e5ff"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          }
        },
        startColor: "rgba(255,113,69,0.3)",
        endColor: "rgba(255,113,69,0.1)",
        color: "#ff7145"
      },
      teamComposition: [], // 团队构成
      distributionOfStores: [], // 门店分布
      compositionOfIncome: [], // 收入构成
      seniorityOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"],
        radius: ["65%", "80%"],
        center: ["50%", "52%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      renting: 5763, // 可租
      sale: 43, // 在售
      newsHouse: 3, // 新房
      oldHouse: 117, // 二手房
      lease: 62, // 出租
      agency: 5, // 代办
      quota: 95763, // 当月成交额
      total: 2095763, // 累计月访问
      dayPeople: 183, // 单日人次
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    this.GetTotalData();
    this.GetTeamComposition();
    this.GetDistributionOfStores();
    this.GetStoreManagementArr();
    this.GetTurnoverData();
    this.GetOnlineHousing();
    this.GetChannelData();
    this.GetCompositionOfIncome();
    this.GetFatigueEffectArr();
    this.GetTurnover();
  },
  methods: {
    // 上部总数据
    async GetTotalData() {
      const p = {
        cityId: ""
      };
      try {
        var res = await GetOfficialWebsiteVisits(p);
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
          // debugger;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取团队构成
    async GetTeamComposition() {
      const p = {
        queryType: "57004"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "teamComposition", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取收入构成
    async GetCompositionOfIncome() {
      const p = {
        queryType: "57009",
        timeType: "3008"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "compositionOfIncome", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取门店分布
    async GetDistributionOfStores() {
      const p = {
        queryType: "57001"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "distributionOfStores", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取门店经营
    async GetStoreManagementArr() {
      const p = {
        queryType: "57002"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "storeManagementArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 获取当月成交额
    async GetTurnover() {
      const p = {
        timeType: "3008"
      };
      try {
        var res = await GetFangLianHangForZHData(p);
        if (res.data.code === "0") {
          this.$set(this, "turnover", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取当月成交量
    async GetTurnoverData() {
      const p = {
        queryType: "57003",
        timeType: "3008"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "turnoverData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取在线房源
    async GetOnlineHousing() {
      const p = {
        queryType: "57005"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "onlineHousing", res.data.result);
          debugger;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取业务员人均劳效
    async GetFatigueEffectArr() {
      const p = {
        queryType: "57008",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDetailList(p);
        if (res.data.code === "0") {
          res.data.result.list.forEach(element => {
            element.xData = this.$utils.formatterMonthFun(element.xData);
          });
          this.$set(this, "fatigueEffectArr", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取获客渠道
    async GetChannelData() {
      const p = {
        queryType: "57007",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          if (res.data.result.length > 0) {
            var newArr = [];
            var newObj = {};
            res.data.result[0].list.forEach(element => {
              newObj = {
                list: [],
                name: element.xData,
                value: element.value
              };
              newArr.push(newObj);
            });
            newArr.forEach((item, index) => {
              res.data.result.forEach((element, index2) => {
                newObj = {
                  name: this.$utils.formatterMonthFun(element.xData1),
                  value: element.list[index].value
                };
                item.list.push(newObj);
              });
            });
            this.$set(this, "channelData", newArr);
          }
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.operateData {
  @include absoluteAllSides(94, 20, 20, 140, 1);
  .top {
    display: flex;
    .item {
      width: 425px;
      height: 270px;
      padding-top: 60px;
      padding-bottom: 44px;
      & > .mainData > .title {
        @include flexFdcXcen;
        margin-bottom: 40px;
        i {
          margin-bottom: 14px;
          font-size: 30px;
        }
        span {
          @include bold(20px);
          line-height: 1;
        }
      }
      & > .mainData > .detail {
        @include flexXjsaYcen;
        p {
          margin-bottom: 5px;
        }
        p,
        .units {
          font-size: 16px;
        }
        .single {
          @include flexFdcXcen;
          & > .num {
            & > span {
              @include din(34px);
              & > i {
                font-size: 20px;
              }
            }
            line-height: 1;
          }
          & > .rate {
            @extend .inlineFlexYbase;
            @include din(34px);
            & > span {
              font-size: 18px;
            }
          }
        }
      }
    }
    & > .item:nth-of-type(1) {
      color: $color3;
    }
    & > .item:nth-of-type(2) {
      color: $color4;
    }
    & > .item:nth-of-type(3) {
      color: $color5;
      & > .mainData > .title {
        margin-bottom: 20px;
      }
      & > .mainData > .quota {
        flex-direction: column;
        .compare {
          display: flex;
          align-items: baseline;
          & > p {
            margin-right: 5px;
            margin-bottom: 0;
            font-size: 14px;
          }
          & > .rate {
            @extend .inlineFlexYbase;
            @include din(24px);
            line-height: 1;
            & > span {
              @include bold(16px);
            }
          }
        }
        & > .single {
          margin-bottom: 20px;
        }
        .bossVersion.green {
          margin-left: 5px;
          color: $color4;
          font-size: 10px;
        }
        .bossVersion.red {
          margin-left: 5px;
          color: $color8;
          font-size: 10px;
        }
      }
    }
    & > .item:nth-of-type(4) {
      color: $color1;
      & > .mainData > .title {
        margin-bottom: 20px;
      }
      & > .mainData > .detail {
        flex-direction: column;
        .total,
        .day {
          .num {
            display: flex;
            align-items: baseline;
            @include din(24px);
            line-height: 1;
            & > p {
              margin-bottom: 0;
            }
            & > span {
              margin: 0 5px;
            }
          }
        }
        .day {
          display: flex;
          align-items: baseline;
          margin-top: 10px;
          p {
            font-size: 14px;
            margin: 0 10px;
          }
          .single {
            display: flex;
            flex-direction: row;
            align-items: baseline;
            margin-left: 15px;
          }
        }
      }
    }
  }
  // 获客渠道分布 / 团队构成 / 业务员人均劳效
  .cen {
    display: flex;
    margin: 20px 0;
    .chartItem {
      position: relative;
      z-index: 1;
      width: 573px;
      height: 328px;
      .chartTips {
        @include absoluteTLSide(62, 22, 1);
      }
      .chart {
        margin-top: 26px;
      }
    }
  }
  // 门店分布 / 门店经营 / 收入构成
  .bot {
    .insideItem {
      width: 100%;
      height: 328px;
      .insideData {
        display: flex;
        align-items: center;
        .insideChart {
          position: relative;
          z-index: 1;
          width: calc(100% / 3);
          .chartTips {
            @include absoluteTLSide(40, 0, 1);
          }
          .chart {
            margin-top: 26px;
          }
        }
        em {
          width: 1px;
          height: 230px;
          margin: 0 30px;
          background-color: $color9;
        }
      }
    }
  }
}
</style>

